<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>createPattern图片</title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
	</body>
	<!--
    	作者：zyl
    	时间：2017-05-23
    	描述：
    	createPattern
    	定义和用法
			createPattern() 方法在指定的方向内重复指定的元素。
			元素可以是图片、视频，或者其他 <canvas> 元素。
			被重复的元素可用于绘制/填充矩形、圆形或线条等等。
			JavaScript 语法：
			context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
			参数	描述
				image	规定要使用的图片、画布或视频元素。
				repeat	默认。该模式在水平和垂直方向重复。
				repeat-x	该模式只在水平方向重复。
				repeat-y	该模式只在垂直方向重复。
				no-repeat	该模式只显示一次（不重复）。
				
	fillStyle 和   strokestyle 属性
    -->
	<script>
				var canvas = document.getElementById("canvas");
				 canvas.width =800;
	            canvas.height =800;	 
	        var context = canvas.getContext("2d");//2d环境
	        //
	        var backgroundImg = new Image();
	        backgroundImg.src="../img/200.jpg";
	        backgroundImg.onload =function(){
	        	var pattern = context.createPattern(backgroundImg,"repeat")
	        	context.fillStyle=pattern;//可以设置图片
	        	context.fillRect(0,0,800,800);
	        }
	</script>
</html>
